<template>
	<view v-if="cont.courseName" :style="theme">
		<view class="head">
			<view class="detail flex">
				<image :src="cont.courseImg"></image>
				<view class="right">
					<view class="title">{{cont.courseName}}</view>
					<view class="jl">{{cont.teacherName}}<text v-if="cont.teacherLevel">{{' | ' + cont.teacherLevel}}</text></view>
					<view v-if="cont.price && cont.price > 0" class="price redColor">¥<text>{{cont.price}}</text></view>
					<view v-else class="green">免费</view>
				</view>
			</view>
			<view class="sjHead">
				<view class="weekList flex flex_between">
					<view v-for="(item,index) in dateList" :key="index" class="li" :class="weekIndex === index?'on':''"
						@click="dateBtn(index)">
						<view class="week">{{ item.week }}</view>
						<view class="date">{{ item.date }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cont">
			<view class="title">选择时间</view>
			<view class="ul flex">
				<view v-for="(item, index) in list" :key="index" class="li"
					:class="item.status !=1?'hui':item.active?'on':''" @click="onBtn(item)">
					<view class="time">{{item.startTime}}-{{item.endTime}}</view>
					<view class="zt" v-if="item.status  == 0">已过期</view>
					<view class="zt ztColor" v-if="item.status == 1 && item.canReserveNum">{{item.reserveNum || 0}}/{{item.canReserveNum || 0}}</view>
					<view class="zt ztColor" v-if="item.status  == 1 && !item.reserveNum">可预约</view>
					<view class="zt" v-if="item.status == 2">已约满</view>
					<view class="zt" v-if="item.status == 3">已取消</view>
				</view>
			</view>
			<view v-if="list.length === 0" class="no-order" style="min-height: 30vh;">
				<image :src="imgHost+'/default_nodata.png'"></image>
				<view>暂无课时规则</view>
			</view>
		</view>

		<view class="foot flex flex_center" @click="$noMultipleClicks(submit)">
			<view class="footBtn">确认预约</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				teacherId: '',
				cont: {},
				dateList: [],
				privateCourseTimeInterval: [],
				weekIndex: 0,
				list: [],
				classType: '',
				duration: '',
				isJoin: 0
			}
		},
		onLoad(ops) {
			this.teacherId = ops.teacherId
			this.classType = ops.classType
			this.duration = ops.duration
			this.isJoin = ops.isJoin || 0
			this.id = ops.id
			this.getWeek()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			onBtn(item) {
				if (item.status == 1) {
					let list = [...this.list]
					list.forEach(s => {
						if (s.startTime === item.startTime && s.endTime === item.endTime) {
							if (s.active) {
								s.active = false
							} else {
								s.active = true
							}
						}
					})
					this.list = list
				}
			},
			dateBtn(index) {
				this.weekIndex = index
				this.getDetail()
			},
			formatSeconds(e) {
			   return this.$app.formatSeconds(e);
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.reserveClassInfo(),
					data: {
						userId: this.userInfo.id,
						param: {
							teacherId: this.teacherId,
							courseId: this.id,
							isJoin: this.isJoin,
							day: this.dateList[this.weekIndex].day
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let cont = res.record
						let list = res.record.timeInfos || []
						if(this.classType == 0) {
							cont.teacherName = cont.teacherName + ' | ' + this.formatSeconds(this.duration) + ' | 一对一'
						} else if(this.classType == 1) {
							cont.teacherName = cont.teacherName + ' | ' + this.formatSeconds(this.duration) + ' | 一对多'
						}
						this.cont = cont
						this.list = list
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			},
			submit() {
				let privateCourseTimeInterval = []
				let list = [...this.list]
				list.forEach(s => {
					if (s.active) {
						privateCourseTimeInterval.push({
							startPeriodTime: s.startTime,
							endPeriodTime: s.endTime
						})
					}
				})
				if (!privateCourseTimeInterval || privateCourseTimeInterval.length == 0) {
					this.$app.showToast('请选择时间')
					return false
				}
				this.$app.ajax({
					api: this.$api.affirmReserveClassInfo(),
					data: {
						userId: this.userInfo.id,
						param: {
							teacherId: this.teacherId,
							courseId: this.id,
							day: this.dateList[this.weekIndex].day,
							privateCourseTimeInterval,
							isJoin: this.isJoin,
							// startTime: this.onInfo.startTime,
							// endTime: this.onInfo.endTime
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						// this.$app
						// 	.showToast(
						// 		'预约成功')
						this.jump3('/pages/curriculum/signup?id=', this.id + '&teacherId=' + this.teacherId + '&isJoin=' + this.isJoin +'&day=' + this.dateList[this.weekIndex].day  + '&peopleNum=' + res.record.peopleNum + '&peopleNumType=' + 1 + '&privateCourseTimeInterval=' + JSON.stringify(privateCourseTimeInterval))
					}
				}).catch(() => {})
			},
			getWeek() {
				const days = 7; // 近7天
				const week = ['日', '一', '二', '三', '四', '五', '六']; // 星期
				const dateList = Array.from({
					length: days
				}, (v, i) => i).map(day => {
					const date = new Date();
					date.setDate(date.getDate() + day);
					let M =
						(date.getMonth() + 1 < 10 ?
							"0" + (date.getMonth() + 1) :
							date.getMonth() + 1) + "-";
					let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					return {
						week: day == 0 ? '今天' : day == 1 ? '明天' : '周' + week[date.getDay()],
						day: date.getFullYear() + '-' + M + D,
						date: date.getDate()
					}
				});
				this.dateList = dateList
				this.getDetail()
			},

		}

	}
</script>
<style scoped lang="scss">
	.head {
		position: sticky;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 99;
		box-sizing: border-box;
		padding: 30rpx 30rpx 0;
		background-color: #fff;

		.detail {
			image {
				width: 212rpx;
				height: 120rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
			}

			.right {
				.title {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}

				.jl {
					font-size: 24rpx;
					margin-top: 8rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					text {
						color: $color;
						font-size: 22rpx;
						line-height: 32rpx;
						padding: 0 10rpx;
						border-radius: 4rpx;
						border: 1px solid $color;
						margin-left: 16rpx;
					}
				}

				.price {
					margin-top: 8rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;

					text {
						font-size: 32rpx;
						font-weight: bolder;
					}
				}

				.green {
					font-size: 26rpx;
					margin-top: 8rpx;
				}
			}
		}

		.sjHead {
			padding: 12rpx 0;
			box-sizing: border-box;

			.weekList {
				margin-bottom: 24rpx;

				.li {
					width: 64rpx;
					text-align: center;

					.week {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-bottom: 10rpx;
					}

					.date {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 64rpx;
					}

					&.on {
						.date {
							background-color: $color;
							color: #fff;
						}
					}
				}

			}

			.teacherTab {
				white-space: nowrap;
				display: flex;
				width: 100%;

				.li {
					width: 105rpx;
					height: 144rpx;
					background: #F7F7F7;
					border-radius: 8rpx;
					text-align: center;
					display: inline-block;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 12rpx;

					&:last-of-type {
						margin-right: 0;
					}

					image {
						width: 72rpx;
						height: 72rpx;
						border: 1rpx solid #F7F7F7;
					}

					view {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-top: 4rpx;
					}
				}
			}
		}

	}

	.cont {
		box-sizing: border-box;
		padding: 40rpx 30rpx 120rpx;

		.title {
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bolder;
			color: #222222;
			margin-bottom: 20rpx;
		}
	}

	.ul {
		flex-wrap: wrap;

		.li {
			width: 216rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			line-height: 1.5;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			text-align: center;
			border: 1px solid #fff;
			box-sizing: border-box;
			overflow: hidden;
			margin-right: 21rpx;
			position: relative;

			&:nth-child(3n) {
				margin-right: 0;
			}

			.time {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
			}

			.zt {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				margin-top: 4rpx;
				color: $color;
			}

			&.hui {

				.time,
				.zt {
					color: #999999;
				}
			}

			&.on {
				border-color: $color;

				&:before {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					border: 24rpx solid $color;
					border-bottom-color: transparent;
					border-left-color: transparent;
				}

				&:after {
					content: '';
					width: 3rpx;
					height: 8rpx;
					position: absolute;
					right: 8rpx;
					top: 6rpx;
					border: 2px solid #fff;
					border-top-color: transparent;
					border-left-color: transparent;
					transform: rotate(45deg);
				}
			}
		}
	}

	.foot {
		width: 100%;
		padding: 30rpx;
		position: fixed;
		left: 0;
		box-sizing: border-box;
		bottom: 0;
		// background: $bjColor;
		z-index: 99;
	}
</style>